<extend name="$_home_public_layout"/>

<block name="title"><title>{:C('WEB_SITE_TITLE')}－{:C('WEB_SITE_SLOGAN')}</title></block>

<block name="style">
    <style type="text/css">
        /* 首页幻灯片 */
        #index-carousel .jumbotron {
            height: 500px;
            padding: 20px 0;
        }
        #index-carousel .carousel-indicators {
            bottom: 35px;
        }

        /* 幻灯片01 简介 */
        .opencmf .title {
            margin-top: 60px;
        }
        .opencmf .abstract {
            margin: 30px 0 70px;
        }
        .opencmf .action .btn-default {
            color: #fff;
            border-color: #fff;
            background: none;
        }
        .opencmf .action .btn-default:hover,
        .opencmf .action .btn-default.active {
            color: #3EA9F5;
            background: #fff;
        }

        /* 幻灯片02 特性 */
        .section-feature-slider h3 {
            color: #fff;
        }
        .section-feature-slider .feature-list .thumbnail {
            background: none;
            border: 0;
        }
        .section-feature-slider .feature-list .thumbnail .cover {
            text-align: center;
            vertical-align: middle;
            padding: 20px;
            margin: auto;
            overflow: hidden;
        }
        .section-feature-slider .feature-list .thumbnail .fa {
            font-size: 60px;
            margin-top: 15px;
            color: #fff;
        }
        .section-feature-slider .feature-list .thumbnail .caption {
            height: 60px;
        }
        .section-feature-slider .feature-list .thumbnail .caption h4 {
            color: #fff;
            cursor: pointer;
            font-size: 14px;
        }

        /* section */
        .section {
            padding: 20px 0;
        }
        .section h3 {
            margin-bottom: 50px;
        }

        /* 官方模块 */
        .section-module .module-list .thumbnail {
            background: none;
            border: 1px solid transparent;
        }
        .section-module .module-list .thumbnail:hover {
            background: none;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        .section-module .module-list .thumbnail .cover {
            width: 100px;
            height: 100px;
            text-align: center;
            vertical-align: middle;
            padding: 10px;
            border-radius: 50%;
            background: #eee;
            margin: auto;
            overflow: hidden;
        }
        .section-module .module-list .thumbnail .fa {
            font-size: 60px;
            margin-top: 15px;
            color: #fff;
        }
        .section-module .module-list .thumbnail .caption {
            height: 32px;
        }
        .section-module .module-list .thumbnail .caption h4 {
            color: #727F8C;
            transition: all 1s;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            /* 幻灯切换 */
            #index-carousel .carousel-indicators {
                bottom: 10px;
            }
            .opencmf .title {
                margin-top: 10px;
                font-size: 20px;
            }
            .opencmf .abstract {
                margin: 10px 0;
                font-size: 12px;
            }
            .opencmf .action .btn {
                font-size: 12px;
            }

            /* 特性 */
            #index-carousel .jumbotron {
                height: 220px;
                padding: 10px 0;
            }
            .section-feature-slider h3 {
                font-size: 14px;
            }
            .section-feature-slider .feature-list .thumbnail {
                margin-bottom: 5px;
            }
            .section-feature-slider .feature-list .thumbnail .cover {
                padding: 10px 0 0 0;
            }
            .section-feature-slider .feature-list .thumbnail .fa {
                font-size: 20px;
                margin-top: 0px;
                color: #fff;
            }
            .section-feature-slider .feature-list .thumbnail .caption {
                height: 10px;
            }
            .section-feature-slider .feature-list .thumbnail .caption h4 {
                color: #fff;
                cursor: pointer;
                font-size: 12px;
                display: none;
            }

            /* 官方模块 */
            .section-module .module-list .thumbnail .cover {
                width: 80px;
                height: 80px;
                padding: 10px;
            }
            .section-module .module-list .thumbnail .fa {
                font-size: 30px;
                margin-top: 15px;
                color: #fff;
            }

            /* section */
            .section {
                padding: 0px 0;
            }
            .section h3 {
                margin-bottom: 15px;
            }
        }
    </style>
</block>

<block name="jumbotron">
    <div id="index-carousel" class="carousel slide" data-ride="carousel" >
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <opencmf:slider_list name="slider">
                <div class="item <php> if($i==1) echo 'active';</php>">
                    <a href="{$slider.url}"><img src="{$slider.cover|get_cover}"></a>
                </div>
            </opencmf:slider_list>
            <?php if(!$__slider_list__): ?>
                <div class="item active">
                    <div class="jumbotron jumbotron-primary jumbotron-background section-feature-slider opencmf">
                        <div class="container">
                            <div>
                                <h1 class="title">
                                    {:C('WEB_SITE_TITLE')}
                                    <label class="small">{:C('CURRENT_VERSION')}</label>
                                </h1>
                            </div>
                            <p class="abstract">
                                {:C('WEB_SITE_DESCRIPTION')}
                            </p>
                            <div class="action">
                                <a class="btn btn-default btn-pill" target="_blank" href="http://www.opencmf.cn/publish/index.html" ><i class="fa fa-download"></i> 立即下载</a>
                                <a class="btn btn-default btn-pill" target="_blank" href="https://github.com/ijry"><i class="fa fa-github"></i> GitHub</a>
                                <a class="btn btn-default btn-pill hidden-xs" target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=1ac8801c2f274de186f5c52203f428a1726ba9e3018aa579399b4c6161ca63cd"><i class="fa fa-qq"></i> QQ群</a>
                                <a class="btn btn-default btn-pill" target="_blank" href="http://opencmf.coding.io"><i class="fa fa-flask"></i> 演示</a>
                                <a class="btn btn-default btn-pill hidden-xs" target="_blank" href="http://www.opencmf.cn/donate/index.html"><i class="fa fa-cny"></i> 支持</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="jumbotron jumbotron-primary jumbotron-background section-feature-slider">
                        <div class="container">
                            <h3 class="text-center">优秀特性</h3>
                            <div class="row feature-list">
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-cubes fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">模块化、插件化</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-cloud fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">云商城打造WebStore</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-hourglass-1 fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">全系列Builder一键生成</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-flash fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">基于ThinkPHP3.2.3最新版</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-desktop fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">全兼容Bootstrap3.3.5</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-circle-o-notch fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">官方开发CUI前端框架</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-tablet fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">多终端响应式支持</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-adjust fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">多模块多主题支持</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-book fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">文档齐全开发简单</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-server fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">云存储支持</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-users fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">多种注册方式</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="thumbnail text-center">
                                        <div class="cover"><span class="fa fa-heart fa-5x"></span></div>
                                        <div class="caption">
                                            <h4 class="text-center">自主产权技术支持完善</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>

        <!-- 幻灯片导航 -->
        <ol class="carousel-indicators">
            <opencmf:slider_list name="slider">
                <li class="<php> if($i==1) echo 'active';</php>" data-target="#index-carousel" data-slide-to="<?php echo $i-1; ?>"></li>
            </opencmf:slider_list>
            <?php if(!$__slider_list__): ?>
                <li data-target="#index-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#index-carousel" data-slide-to="1"></li>
            <?php endif; ?>
        </ol>

        <!-- 左右切换按钮 -->
        <a class="left carousel-control hidden-xs" href="#index-carousel" data-slide="prev"><span class="fa fa-chevron-left"></span></a>
        <a class="right carousel-control hidden-xs" href="#index-carousel" data-slide="next"><span class="fa fa-chevron-right"></span></a>
    </div>
</block>

<block name="main">
    <div class="section section-module">
        <div class="container">
            <h3 class="text-center">官方模块</h3>
            <div class="row module-list">
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover1" style="background: #F68A3A;"><span class="fa fa-cubes fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">核心模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover2" style="background: #398CD2;"><span class="fa fa-newspaper-o fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">CMS通用模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover3" style="background: #80C243;"><span class="fa fa-users fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">用户中心模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover4" style="background: #DC6AC6;"><span class="fa fa-weixin fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">微信模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover5" style="background: #45BEC3;"><span class="fa fa-book fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">手册模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover6" style="background: #3C9746;"><span class="fa fa-commenting-o fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">论坛模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover7" style="background: #FED825;"><span class="fa fa-money fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">充值模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover8" style="background: #E83A2C;"><span class="fa fa-gavel fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">跳蚤市场</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover1" style="background: #F68A3A;"><span class="fa fa-history fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">创业项目</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover2" style="background: #398CD2;"><span class="fa fa-user fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">投资人</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover3" style="background: #80C243;"><span class="fa fa-home fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">租房房源</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover4" style="background: #DC6AC6;"><span class="fa fa-calendar-check-o fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">工单模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover5" style="background: #45BEC3;"><span class="fa fa-send-o fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">软件发布</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover6" style="background: #3C9746;"><span class="fa fa-thumbs-o-up fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">捐赠模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover7" style="background: #FED825;"><span class="fa fa-coffee fa-5x"></span></div>
                        <div class="caption">
                            <h4 class="text-center">开发工具</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
